<template>
	<view class="content"  :class="[updateShow?'show_up':'']">
		<!-- #ifdef APP-PLUS -->
		<top-set :backgroundColor="topSetColor"></top-set>
		<!-- #endif -->
		<view class="test" v-if="type=='cleaner'">
			<cleaner-home ref='cleanerRefresh' :class="[contentView == '1'?'show':'hide']"></cleaner-home>
			<grab-sheet-cleaner @changeColor="changeTopColor" :class="[contentView == '2'?'show':'hide']"></grab-sheet-cleaner>
			<user-cleaner :class="[contentView == '3'?'show':'hide']"></user-cleaner>
		</view>
		<view class="test" v-if="type=='hotel'">
			<hotel-home :class="[contentView == '1'?'show':'hide']"></hotel-home>
			<hotel-order :class="[contentView == '2'?'show':'hide']"></hotel-order>
			<user-hotel :class="[contentView == '3'?'show':'hide']"></user-hotel>
		</view>


		<!-- 底部 -->
		<cleaner-tab @changeColor="changeTopColor" @_refresh="_refresh" @viewTop="setViewTop" @useTop="useViewTop" class="" v-if="type=='cleaner'"></cleaner-tab>
		<hotel-tab @changeColor="changeTopColor"  @viewTop="setViewTop" @useTop="useViewTop" class="" v-if="type=='hotel'"></hotel-tab>
		<update v-if="updateShow" @close="closeUpdate"></update>
	</view>
</template>

<script>
	let timer,socket;
	import cleanerTab from '@/components/tabBar/cleaner.vue';
	import hotelTab from '@/components/tabBar/hotel.vue';
	import topSet from '@/components/top-set/top-set.vue';
	import cleanerHome from "@/components/cleaner/home/home.vue";
	import hotelHome from "@/components/hotel/home/home.vue";
	import userCleaner from "@/components/cleaner/user/user.vue";
	import userHotel from "@/components/hotel/user/user.vue";
	import grabSheetCleaner from "@/components/cleaner/grab-sheet/grab-sheet.vue";
	import hotelOrder from "@/components/hotel/hotel-order/hotel-order.vue";
	import update from "@/components/update/update.vue";
	import '@/common/base64/blue-background.css';
	import { mapMutations } from 'vuex';
	export default {
		data() {
			return {
				topSetColor: '#FFFFFF',
				updateShow:false,
				cleaner: {
					1: {
						top: 0
					},
					2: {
						top: 0
					},
					3: {
						top: 0
					}
				},
				hotel: {
					1: {
						top: 0
					},
					2: {
						top: 0
					},
					3: {
						top: 0
					}
				}
			}
		},
		onLoad() {
			this.loadExecution();
			// #ifdef APP-PLUS
			//APP进入后台运行
			this.appHied();
			// #endif
		},
		onReady() {
			// #ifdef APP-PLUS
			this.detectionUpdate();
			let info = plus.push.getClientInfo();
			let mobile_id = info.clientid;
			let uid = this.isLogin().id ? this.isLogin().id : ''
			this.req({
				url:'mobile/info',
				data:{
					mobile_id:mobile_id,
					uid:uid
				}
			},(res)=>{
				console.log(res)
			})
			// #endif
		},
		onShow() {
			// #ifdef APP-PLUS
			this.modifyTop();
			// #endif
			this.realTimeCommunication();//实时通讯监听 订单状态变化
			
		},
		//上拉加载
		onReachBottom() {
			console.log('上拉');
		},
		//下拉刷新
		onPullDownRefresh(){
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		components: {
			cleanerHome,
			hotelHome,
			topSet,
			cleanerTab,
			hotelTab,
			userCleaner,
			userHotel,
			grabSheetCleaner,
			hotelOrder,
			update
		},
		computed: {
			contentView() {
				return this.$store.state.tab;
			}, 
			type() {
				return this.$store.state.terminalType;
			}
		},
		watch: {

		},
		onHide(){
			clearInterval(timer);
		},
		methods: {
			...mapMutations({
						changeCleanerOrder:'changeCleanerOrder', // 将 `this.changeCleanerOrder()` 映射为 `this.$store.commit('changeCleanerOrder')`
						changeHotelOrder:'changeHotelOrder',
						changeNews:'changeNews'
			}),
			appHied(){
				let main = plus.android.runtimeMainActivity();  
			
					plus.runtime.quit = function(){  
						main.moveTaskToBack(false);  
					};  
			
					plus.nativeUI.toast = (function(str){  
						if(str == '再按一次退出应用'){  
							main.moveTaskToBack(false);  
							return false;  
						}else{  
							uni.showToast({  
								title:str,  
								icon:'none',  
							})  
						}  
					});  
			},
			loadExecution: function() {
				/**
				 * 判断是否进入引导页
				 * 获取本地存储中launchFlag的值
				 * 若存在，说明不是首次启动，直接进入首页；
				 * 若不存在，说明是首次启动，进入引导页；
				 */
				try {
					const value = uni.getStorageSync('launchFlag');
					if (value) {
						if (value == true) {

							/**
							 * 判断登录 登录进入APP 否则进入注册登录页面
							 */
							try {
								if (!this.isLogin()) {
									uni.navigateTo({
										url: '/pages/login/login'
									});
								}
							} catch (e) {
								//TODO handle the exception
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}



						} else {
							uni.navigateTo({
								url: '/pages/index/guide',
								animationType: "none"
							});
						}
					} else {
						uni.setStorage({
							key: 'launchFlag',
							data: true,
							success: function() {
								console.log('存储launchFlag');
							}
						});
						uni.navigateTo({
							url: '/pages/index/guide'
						});
					}
				} catch (e) {
					// error 
					uni.setStorage({
						key: 'launchFlag',
						data: true,
						success: function() {
							console.log('error时存储launchFlag');
						}
					});
					uni.navigateTo({
						url: '/pages/index/guide'
					});
				}
				return;
			},
			changeTopColor(color) {
				this.topSetColor = color;
			},
			_refresh(){
				/**
				 * 首页数据刷新
				 */
				this.$refs.cleanerRefresh.hotelReq()
			},
			/**
			 * 设置某个页面高度
			 */
			setViewTop(obj) {
				let {
					type,
					tab,
					offSetTop
				} = obj;
				console.log(offSetTop);
				if (type == 'cleaner') {
					this.cleaner[tab].top = offSetTop;
				} else {
					this.hotel[tab].top = offSetTop;
				}
				console.log(this.hotel);
			},
			/**
			 * 使用当前页面高度
			 */
			useViewTop() {
				setTimeout(() => {
					console.log(this.hotel);
					let tab = this.contentView;
					if (this.type == 'cleaner') {
						uni.pageScrollTo({
							scrollTop: this.cleaner[tab].top,
							duration: 0
						});
					} else {
						console.log(tab);
						console.log(this.hotel[tab].top);

						uni.pageScrollTo({
							scrollTop: this.hotel[tab].top,
							duration: 0
						});


					}
				}, 1);
			},
			/**
			 * 修改顶部逻辑
			 */
			modifyTop() {
				if (this.type == 'cleaner') {
					if (this.contentView == 2 || this.contentView == 3) {
						this.changeTopColor('#3595f9');
						plus.navigator.setStatusBarStyle('light');
					} else {
						this.changeTopColor('#FFFFFF');
						plus.navigator.setStatusBarStyle('dark');
					}
				} else {
					if (this.contentView == 2 || this.contentView == 3) {
						this.changeTopColor('#3595f9');
						plus.navigator.setStatusBarStyle('light');
					} else {
						this.changeTopColor('#FFFFFF');
						plus.navigator.setStatusBarStyle('dark');
					}
				}
			},
			/**
			 * 检查更新
			 */
			detectionUpdate(){
				let newVersion = uni.getStorageSync('new_version');
				if(newVersion.version != plus.runtime.version && plus.os.name != "iOS"){
					this.updateShow = true;
				}
				console.log(newVersion);
			},
			/**
			 * 关闭更新功能
			 */
			closeUpdate(){
				this.updateShow = false;
			},
			/**
			 * 实时通讯
			 */
			realTimeCommunication() {
				
				if(timer)clearInterval(timer);
				/**
				 * 切换端口 或者 从后台唤醒APP 将会启动多余的长链接
				 */
				if(socket)uni.closeSocket();
				
				socket = uni.connectSocket({
					url:uni.getStorageSync('system_config').socket_url || 'ws://39.107.232.102:39190',
				});
				uni.onSocketOpen((res) => {
				
					
					
					uni.sendSocketMessage({
						data:this.isLogin()? this.isLogin().id:''
					});
					
					
					timer = setInterval(()=>{
						uni.sendSocketMessage({
							data:this.isLogin()? this.isLogin().id:''
						});
					},56000)
				
					uni.onSocketMessage((res)=> {
						let obj;
						let data = JSON.parse(res.data);
						console.log(data.info);
						
						if(this.type == 'cleaner'){
							/**
							 * 保洁端
							 */	
							obj = {
								dds:0,//待打扫
								dqr:0//待确认
							}
							try{
								if(data.info.order_status_count ){
									
									data.info.order_status_count.forEach(v=>{
										if (v.order_count >= 99) {
											v.order_count = '99+';
										}
										switch (v.order_state){
											case 20:
												obj.dds = v.order_count;
												break;
											case 30:
												obj.dqr = v.order_count;
												break;
											default:
												break;
										}
									});
									
								}
							}catch(e){
								//TODO handle the exception
							}
							
							for (let key in obj) {
								this.changeCleanerOrder({key:key,value:obj[key]})	
							}
							
						}else{
							/**
							 * 酒店端
							 */
							obj = {
								djd:0,//待接单
								dds:0,//待打扫
								dqr:0//带确认
							}
							try{
								if(data.info.order_status_count){
									
									data.info.order_status_count.forEach(v=>{
										if (v.order_count >= 99) {
											v.order_count = '99+';
										}
										switch (v.order_state){
											case 10:
												obj.djd = v.order_count;
												break;
											case 20:
												obj.dds = v.order_count;
												break;
											case 30:
												obj.dqr = v.order_count;
												break;
											default:
												break;
										}
									});
									
								}
							}catch(e){
								//TODO handle the exception
							}
							
							for (let key in obj) {
								this.changeHotelOrder({key:key,value:obj[key]});
							}
						}
						if(data.info){
							this.changeNews(data.info.haveNews);
						}else{
							this.changeNews(0);
						}
						
						
						
					});
					
				});
				
			}
		}
	}
</script>
<style>
	.content{
		min-height: 100vh;
	}
	.show_up{
		overflow-y: hidden;
		height: 100vh;
	}
	.set-bottom {
		width: 100%;
		height: 98upx;
	}

	.show {
		display: block;
	}

	.hide {
		display: none;
	}
</style>
